import React, { useEffect } from 'react';
import { useLocation, Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { observer } from 'mobx-react-lite';
import { X, Home } from 'lucide-react';
import menuStore from '@/store/menu';
import { cn } from '@/lib/utils';

// 最近打开的页面，方便再次打开，打开的页面不一定在菜单中存在
export const HeaderTabs = observer(() => {
    const navigate = useNavigate();
    const { pathname } = useLocation();
    const { t } = useTranslation();

    useEffect(() => {
        menuStore.addTab(pathname);
    }, [pathname]);

    return (
        <div className='hidden sticky top-14 bg-background z-10 h-[40px] md:flex gap-1 py-1 px-2 border-y-[1px] border-y-slate-400'>
            <div
                className={cn(
                    'group relative left-auto flex w-[120px] min-w-fit border items-center cursor-pointer rounded-t',
                    {
                        'border-primary': pathname === '/console',
                        'text-primary': pathname === '/console',
                    },
                )}
            >
                <Link to='/console' className='flex flex-1 items-center px-2'>
                    <Home className='w-[20px] h-[20px] mr-2' />
                    仪表盘
                </Link>
            </div>
            {menuStore.tabs.map((item) => {
                return (
                    <div
                        key={item.pathname}
                        className={cn(
                            'group relative left-auto flex w-[120px] min-w-fit border items-center cursor-pointer rounded-t',
                            {
                                'border-primary': item.pathname === pathname,
                                'text-primary': item.pathname === pathname,
                            },
                        )}
                    >
                        <Link to={item.pathname} className='flex flex-1 px-2 '>
                            {item.title || t(item.pathname)}
                        </Link>
                        <div className='w-[28px] h-full flex justify-center items-center'>
                            <X
                                onClick={() => {
                                    menuStore.removeTab(item);
                                    if (item.pathname === pathname) {
                                        let [tab] = menuStore.tabs.slice(-1);
                                        if (!tab) {
                                            tab = {
                                                id: 'dasboard',
                                                title: '仪表盘',
                                                pathname: '/console',
                                                icon: '',
                                            };
                                        }
                                        navigate(tab.pathname);
                                    }
                                }}
                                className={cn(
                                    'w-[20px] h-[20px] opacity-0 group-hover:opacity-100 hover:bg-slate-400 rounded-full',
                                    {
                                        'opacity-100': item.pathname === pathname,
                                    },
                                )}
                            />
                        </div>
                    </div>
                );
            })}
        </div>
    );
});
